<template>
  <div>
    <div class="clearfix fr container_main" id="page222">
      <div id="left-box">
        <div class="bbs_detail_wrap" id="bbs_detail_wrap">
          <!--标题-->
          <div id="bbs_title_bar" class="bbs_title_bar">
            <div class="owner_top clearfix">
              <h3 class="owner_h">
                <span :title="forumById.forumTitle">{{ forumById.forumTitle }}</span>
              </h3>
              <div class="bbs_bread_wrap">
                <div class="tips" v-if="forumById.status=='0'" style="display:inline-block">
                  <span class="topics_type unr">待审核</span>
                </div>
                <div class="fav_box">
                  <a id="bbs_fav" class="fav_btn unsave" style="cursor: pointer;">收藏</a>
                  <a style="cursor:pointer" class="fav_btn reply_topic" @click="showEditorClick">回复</a>
                </div>
                <span class="fr point_num">[ {{ parseTime(forumById.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }} ]</span>
              </div>
            </div>

          </div>

          <!--楼主发贴信息-->
          <div class="mod_topic_wrap post topic">
            <!--左侧头像信息-->
            <dl class="topic_wrap clearfix">
              <dt class="topic_l topic_owner">
                <div class="user_left"
                     @mouseover="subsOpen('userLZ',forumById)"
                     @mouseout="subsStop('userLZ',forumById)"
                >
                  <a class="user_head_box" style="cursor:pointer">
                    <el-image :src="forumById.avatar" class="avatar" :lazy="true"></el-image>
                  </a>
                  <div class="user_material" :style="{'display':showUserLZ?'block':'none'}">
                    <div class="user_material_bg">
                      <dl class="user_material_c">
                        <dt class="fl" v-if="forumById.user">
                          <router-link :to="'/personal?id='+forumById.user.userId" class="user_head_box" rel="nofollow">
                            <img :src="forumById.avatar" class="avatar" :lazy="true">
                          </router-link>
                        </dt>
                        <dd>
                          <ul class="topic_list" v-if="forumList.length>0">
                            <li v-for="(item,index) in forumList" :key="index">
                              <em>⋅</em><a style="cursor:pointer" @click="editClick(item)">{{ item.forumTitle }}</a>
                            </li>
                          </ul>
                          <ul class="topic_list" v-else>
                            <li v-if="forumById.user">
                              <em>⋅</em>
                              <router-link :to="'/personal?id='+forumById.user.userId">此用户还没有发表过任何帖子</router-link>
                            </li>
                          </ul>
                        </dd>
                        <dd class="more_topic_wrap" v-if="forumList.length>0">
                          <router-link v-if="forumById.user" :to="'/personal?id='+forumById.user.userId"
                                       class="more_topic"
                          >更多帖子
                          </router-link>
                        </dd>
                        <dd class="fun_dd">
                          <a style="cursor:pointer" class="follow_btn genius_att att_active">关注</a>
                          <!--下面是已关注按钮样式-->
                          <!--a.al_follow_btn(style="cursor:pointer") 已关注-->
                          <router-link v-if="forumById.user" :to="'/personal?id='+forumById.user.userId"
                                       class="att_active"
                          >空间
                          </router-link>
                        </dd>
                      </dl>
                    </div>
                  </div>

                </div>
                <div class="user_right">
                  <div class="user_nick_name" style="padding-top: 10px">
                    <div class="nick_name" v-if="forumById.user">
                      <router-link :to="'/personal?id='+forumById.user.userId"
                                   style="cursor:pointer" class="Hash"
                                   :title="forumById.user.nickName"
                      >{{ forumById.user.nickName }}
                      </router-link>
                    </div>
                  </div>
                </div>
              </dt>

              <!--右侧内容-->
              <dd class="topic_r post_info floorOwner">
                <div class="post_body post_body_min_h">
                  <div class="qudiaoBorder">
                    <div class="editor ql-container ql-snow">
                      <div class="ql-editor text" v-html="forumById.forumContent"></div>
                    </div>
                  </div>
                </div>
                <div class="control control_new clearfix">
                  <div class="control_l fl">
                    <label class="date_time">{{ parseTime(forumById.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</label>
                  </div>
                  <div class="control_r fr">
<!--                    <label @click="btnClick('fabulous')" class="red_praise digg d_hide">-->
<!--                      <span class="icon_praise"></span>-->
<!--                      <em>点赞</em>-->
<!--                    </label>-->
                    <!--<a style="cursor:pointer" class="quote d_hide">引用</a>-->
<!--                    <a style="cursor:pointer" class="report_spam d_hide">举报</a>-->
                    <span class="floor">楼主</span>
                    <span class="floor pack_up">收起</span>
                  </div>
                </div>
                <div class="omit_wrap">
                  <div class="tips">
                    <span>展开阅读全文</span>
                    <i></i>
                  </div>
                </div>
              </dd>
            </dl>
          </div>

          <!--评论信息-->
          <div class="mod_topic_wrap post" v-for="(item,index) in replyList" :key="index">
            <dl class="topic_wrap clearfix">
              <dt class="topic_l ">
                <div class="user_left"
                     @mouseover="subsOpen('userPl',item)"
                     @mouseout="subsStop('userPl',item)"
                >
                  <a style="cursor:pointer" class="user_head_box">
                    <el-image :src="changeAvatar(item.fromUser.avatar)" class="avatar" :lazy="true"></el-image>
                  </a>
                  <div class="user_material" :style="{'display':item.showUser?'block':'none'}">
                    <div class="user_material_bg">
                      <dl class="user_material_c">
                        <dt class="fl">
                          <router-link :to="'/personal?id='+item.fromId" class="user_head_box">
                            <img :src="changeAvatar(item.fromUser.avatar)" class="avatar" :lazy="true">
                          </router-link>
                        </dt>
                        <dd>
                          <ul class="topic_list" v-if="forumList.length>0">
                            <li v-for="(item,index) in forumList" :key="index">
                              <em>⋅</em><a style="cursor:pointer" @click="editClick(item)">{{ item.forumTitle }}</a>
                            </li>
                          </ul>
                          <ul class="topic_list" v-else>
                            <li>
                              <em>⋅</em>
                              <router-link :to="'/personal?id='+item.fromId">
                                此用户还没有发表过任何帖子
                              </router-link>
                            </li>
                          </ul>
                        </dd>
                        <dd class="more_topic_wrap" v-if="forumList.length>0">
                          <router-link :to="'/personal?id='+item.fromId" class="more_topic">更多帖子</router-link>
                        </dd>
                        <dd class="fun_dd">
                          <a style="cursor:pointer" class="follow_btn genius_att att_active">关注</a>
                          <!--下面是已关注按钮样式-->
                          <!--a.al_follow_btn(style="cursor:pointer") 已关注-->
                          <router-link :to="'/personal?id='+item.fromId" class="att_active">空间</router-link>
                        </dd>
                      </dl>
                    </div>
                  </div>

                </div>
                <div class="user_right">
                  <div class="user_nick_name" style="padding-top: 10px;">
                    <div class="nick_name">
                      <router-link :to="'/personal?id='+item.fromId"
                                   class="Hash"
                                   :title="item.fromUser.nickName"
                      >{{ item.fromUser.nickName }}
                      </router-link>
                    </div>
                  </div>
                </div>
              </dt>
              <dd class="topic_r post_info pb36">
                <div class="post_body post_body_min_h">
                  <div class="qudiaoBorder">
                    <div class="editor ql-container ql-snow">
                      <div class="ql-editor text" v-html="item.replyContent"></div>
                    </div>
                  </div>
                </div>
                <div class="control control_new clearfix">
                  <div class="control_l fl">
                    <label class="date_time">{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</label>
                  </div>
                  <div class="control_r fr">
<!--                    <label class="red_praise digg d_hide">
                      <span class="icon_praise"></span>
                      <em v-if="item.fabulous<=0">点赞</em>
                      <em v-else>点赞 {{ item.fabulous }}</em>
                    </label>-->
                    <a @click="delClick(item)" v-if="item.fromId===user.userId" style="cursor:pointer" class="quote d_hide">删除</a>
<!--                    <a style="cursor:pointer" class="report_spam d_hide">举报</a>-->
                    <span class="floor">#{{ index + 1 }}</span>
                  </div>
                </div>
              </dd>
            </dl>
          </div>

          <!--分页，收藏，点赞-->
          <div class="paginate_box " id="replyHeight" :class="btnFlag?'replyHeight':''">
            <div class="page_nav">
              <!-- 分页-->
              <div class="page-box">
                <pagination
                  v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getRelyList"
                />
              </div>
            </div>
            <div class="fav_box fr">
              <a style="cursor:pointer" class="fav_btn pick">收起</a>
            </div>

            <div class="mod_fun_wrap clearfix fr detail" v-if="forumById.userId==user.userId">
              <ul class="fun_l fr">
                <li v-if="forumById.accept=='0'"><a style="cursor:pointer" @click="acceptClick" class="menu_a">结贴</a></li>
                <li v-if="forumById.accept=='1'"><a style="cursor:pointer" class="menu_a">已结贴</a></li>
                <li v-if="forumById.userId===user.userId"><a @click="delForumClick(forumById)" style="cursor:pointer" class="menu_a">删除</a></li>

              </ul>
            </div>
            <div class="fav_box fr">
              <a data-report-click="{&quot;spm&quot;:&quot;3001.4211&quot;}" id="bbs_fav" class="fav_btn unsave"
                 data-bind-collection="true" rel="nofollow" style="cursor: pointer;"
              >收藏</a>
              <a @click="showEditorClick" style="cursor:pointer" class="fav_btn reply_topic">回复</a>
            </div>
          </div>

          <div class="mod_topic_wrap mar_no_top" id="answer_wrap" :class="[showFull?'fullShow_class':'']">
            <div :style="{'display':showEditor? 'none':'block'}" class="csdn_bbs_warp"
                 style="width: 1032px;height: 36px;"
            >
              <span @click="showEditorClick" class="fl" style="width: 940px;">我也来说一句...</span>
              <span @click="showEditorClick" class="fr">回帖</span>
            </div>

            <div class="csdn-bbs" :style="{'display':showEditor? 'block':'none'}" :class="[showFull?'fullWidth':'']">
              <div title="全屏" class="icon_fullScreen" @click="fullClick"></div>
              <div style="padding: 12px 24px">
                <el-form ref="form" :model="form" :rules="rules" label-width="0px">
                  <el-form-item prop="replyContent">
                    <editor v-model="form.replyContent" :min-height="192"/>
                  </el-form-item>
                  <div class="tijiao">
                    <span class="fr" style="font-size:0;height: 28px;">
                      <input @click="submitForm" type="button" value="提交回复" class="btn_b">
                    </span>
                  </div>
                  <div style="clear:both"></div>
                  <ul class="pub_list_new">
                    <li>请遵守中原工学院社联论坛准则，不得违反国家法律法规; 转载文章请注明出自中原工学院，如是商业用途请联系原作者 ; 请不要讨论政治相关话题。</li>
                  </ul>
                </el-form>
              </div>
            </div>
          </div>


        </div>
      </div>
      <!--回复消息-->

    </div>
  </div>
</template>

<script>
import Editor from '@/components/Editor'
import { mapGetters } from 'vuex'
import { getForum, updateReplyNumber, updateAccept, listForum, updateClickNumber,delForum,updateReplyNumberDel } from '@/api/forum'
import { listReply, addReply,delReply } from '@/api/forumReply'
import { addMessage } from '@/api/message'
import { getToken } from '@/utils/auth'
import store from '@/store'

export default {
  name: 'edit',
  components: { Editor },
  data() {
    return {
      showEditor: false,
      showUserLZ: false,
      forumById: {}, //单条帖子
      replyList: [], //评论列表
      forumList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        replyContent: [
          { required: true, message: '文章内容不能为空', trigger: 'blur' }
        ]
      },
      btnFlag: true,
      showFull: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fromId: undefined,
        report: '0',
        status: '0',
        orderByColumn: 'reply_id',
        isAsc: 'asc'
      }
    }
  },
  computed: {
    ...mapGetters(['user']),
    forumId() {
      return this.$route.query.id
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop, true)
  },
  created() {
    this.getList()
  },
  methods: {

    delForumClick(val){
      this.$confirm('确定要删除此条贴子吗？', '删除贴子', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delForum(val.forumId);
      }).then(() => {
        this.msgSuccess("删除成功");
        this.$router.push('/forum/home')
      })
    },

    delClick(val){
      this.$confirm('确定要删除此条回帖吗？', '删除回帖', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delReply(val.replyId);
      }).then(() => {
        this.getRelyList()
        updateReplyNumberDel(this.forumId)
        this.msgSuccess("删除成功");
      })
    },

    subsOpen(e, val) {
      if (e == 'userLZ') {
        this.showUserLZ = true
        let query = {
          pageNum: 1,
          pageSize: 3,
          userId: val.userId,
          report: '0',
          status: '1'
        }
        listForum(query).then(res => {
          this.forumList = res.rows
        })
      } else if (e == 'userPl') {
        this.replyList.map(item => {
          this.$set(item, 'showUser', false)
        })
        this.$set(val, 'showUser', true)
        let query2 = {
          pageNum: 1,
          pageSize: 3,
          userId: val.fromId,
          report: '0',
          status: '1'
        }
        listForum(query2).then(res => {
          this.forumList = res.rows
        })
      }

    },
    subsStop(e, val) {
      if (e == 'userLZ') {
        this.showUserLZ = false
      } else if (e == 'userPl') {
        this.$set(val, 'showUser', false)
      }

    },

    //获取论坛数据
    getList() {
      getForum(this.forumId).then(res => {
        this.forumById = res.data
        this.forumById.avatar = this.changeAvatar(this.forumById.user.avatar)
        this.getRelyList()
      })
    },
    //获取评论列表
    getRelyList() {
      this.queryParams.forumId = this.forumId
      listReply(this.queryParams).then(result => {
        this.replyList = result.rows
        this.total = result.total
      })
    },

    //全屏按钮
    fullClick() {
      this.showFull = !this.showFull
      if (!this.showFull) {
        var PageId = document.querySelector('#answer_wrap')
        console.log('3333', PageId.offsetTop)
        window.scrollTo({
          'top': PageId.offsetTop,
          'behavior': 'smooth'
        })
      }
      this.$emit('fullShow', this.showFull)
    },

    //结帖按钮
    acceptClick() {
      this.$confirm('您确定结束这篇帖子的回帖吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateAccept(JSON.parse(JSON.stringify(this.forumId)), '1').then(response => {
          if (response.code === 200) {
            this.msgSuccess('结帖成功')
            this.form = {}
            this.showEditor = false
            this.getList()
          } else {
            this.msgError('结帖异常，请重试')
          }
        })
      }).catch(err => {
      })
    },

    //展开回帖按钮
    showEditorClick() {
      if (!getToken()) {
        this.$confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
        })
      } else {
        if (this.forumById.status != '1') {
          this.$message({
            showClose: true,
            message: '帖子待审核中，暂不允许回帖？',
            type: 'warning'
          })
          return
        }
        if (this.forumById.accept == '1') {
          this.$message({
            showClose: true,
            message: '楼主已结帖，暂不允许回帖？',
            type: 'warning'
          })
          return
        }
        this.showEditor = true
        var PageId = document.querySelector('#answer_wrap')
        // 打印出对应页面与窗口的距离
        // 使用平滑属性，滑动到上方获取的距离
        // 下方我只设置了top，当然 你也可以加上 left 让他横向滑动
        // widow 根据浏览器滚动条，如果你是要在某个盒子里面产生滑动，记得修改
        window.scrollTo({
          'top': PageId.offsetTop,
          'behavior': 'smooth'
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.fromId = JSON.parse(JSON.stringify(this.user.userId))
          this.form.forumId = JSON.parse(JSON.stringify(this.forumId))
          addReply(this.form).then(response => {
            this.msgSuccess('回帖成功')
            this.form = {}
            this.showEditor = false
            this.getList()
            updateReplyNumber(JSON.parse(JSON.stringify(this.forumId)))
            if (this.forumById.user.userId == this.user.userId) {
              return
            }
            let message = {
              fromId: this.user.userId,
              fromName: this.user.nickName,
              toId: this.forumById.user.userId,
              toName: this.forumById.user.userName,
              messageTitle: '论坛',
              identity: '1',
              type: '1',
              payload: JSON.stringify(this.forumById),
              messageContent: '回复了你的帖子'
            }
            addMessage(message)
          })
        }
      })
    },
    btnClick(e) {

    },
    editClick(data) {
      updateClickNumber(data.forumId)
      this.$router.push({
        path: '/forum/edit',
        query: {
          id: data.forumId
        }
      })
      this.$router.go(0)
    },

    scrollToTop() {
      const that = this
      var PageId2 = document.querySelector('#answer_wrap')
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > PageId2.offsetTop - 650) {
        that.btnFlag = false
      } else {
        that.btnFlag = true
      }
    }
  },
  destroyed() {
    // 离开页面时需销毁滚动监听事件
    window.removeEventListener('scroll', this.scrollToTop)
  }
}
</script>
<style scoped>
#bbs_detail_wrap {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05)
}

#bbs_detail_wrap div.bbs_bread_wrap {
  line-height: 32px;
  height: 32px;
  background: #f7f7fd;
  border-radius: 4px;
  padding: 0 8px;
  color: #5893C2;
  margin-bottom: 16px
}

#bbs_detail_wrap div.bbs_bread_wrap a {
  color: #5893C2
}

#bbs_detail_wrap div.bbs_bread_wrap a:hover {
  text-decoration: none
}

#bbs_title_bar div.bbs_bread_wrap .tips .topics_type:last-of-type {
  margin-right: 16px
}

#csdn-toolbar .container, .news-nav .container {
  padding-left: 0 !important;
  margin: 0 auto !important
}

.syntaxhighlighter, .syntaxhighlighter table td.code .container::before {
  content: unset
}

.container-box {
  width: 1200px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto
}

.container-box .bbs_detail_wrap {
  float: left;
  width: 100% !important;
}

.container-box .bbs_detail_wrap .bbs_title_bar {
  width: 100% !important;
}

.container-box .container_main {
  background: #fff;
  margin-top: 12px;
  margin-bottom: 20px;
  width: 1080px !important;
}

.container-box #left-box {
  float: left;
  width: 1080px !important
}

.topic_wrap .topic_r {
  width: 818px;
  max-width: unset
}

.bottom-pub-footer {
  position: relative;
  z-index: 2
}

.right-box {
  float: right;
  margin-top: 8px;
  width: 300px;
  margin-left: 8px;
  flex-shrink: 0;
  z-index: 1
}

.right-box .right_item {
  width: 100%;
  background-color: #fff;
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05)
}

.right-box .right_item:first-child {
  margin-top: 0px;
  padding: 16px 12px
}

.right-box .right_item .big_btn {
  width: 268px;
  height: 36px;
  background-color: #e33e33;
  color: #fff;
  line-height: 36px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block
}

.right-box .right_item .big_btn:hover {
  background-color: #FF6666
}

.third-list-box-top {
  margin-top: 8px
}

.third-list-box {
  margin-bottom: -8px;
  background-color: #fff
}

.third-list-box dl {
  padding: 8px 8px 0
}

.third-list-box dl:last-child {
  padding-bottom: 8px
}

.third-list-box dl dt a {
  display: block;
  font-size: 14px;
  color: #5c5c5c;
  letter-spacing: 0;
  line-height: 20px;
  max-height: 44px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.third-list-box dl dd {
  color: #999;
  font-size: 12px;
  max-height: 40px;
  overflow: hidden;
  line-height: 20px;
  margin-top: 4px
}

.persion_article {
  width: 300px
}

.user-years {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px
}

.praise:hover .csdn-thumbsup-ok {
  display: block
}

.praise:hover .csdn-thumbsup, .praise .csdn-thumbsup-ok {
  display: none
}

.mod_fun_wrap .answer_btn {
  width: 184px;
  height: 32px;
  position: relative;
  background: #FC5531;
  border-radius: 2px;
  float: left;
  cursor: pointer
}

.mod_fun_wrap .answer_btn .answer_img {
  display: block;
  width: 19px;
  height: 15px;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%)
}

.mod_fun_wrap .answer_btn .answer_text {
  margin: 0;
  font-size: 16px;
  color: #fff;
  line-height: 32px;
  position: absolute;
  left: 40px
}

.mod_fun_wrap .answer_box {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000
}

.mod_fun_wrap .answer_box .answer_back {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5)
}

.mod_fun_wrap .answer_box .answer_window {
  width: 350px;
  height: 162px;
  background: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e3e3;
  box-sizing: border-box;
  padding: 16px
}

.mod_fun_wrap .answer_box .answer_window .answer_title {
  height: 24px;
  position: relative
}

.mod_fun_wrap .answer_box .answer_window .answer_title .notice {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0
}

.mod_fun_wrap .answer_box .answer_window .answer_title .title {
  font-size: 16px;
  color: #3D3D3D;
  line-height: 24px;
  position: absolute;
  left: 19px;
  font-weight: 600
}

.mod_fun_wrap .answer_box .answer_window .answer_title .answer_close {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 4px;
  top: 4px;
  cursor: pointer
}

.mod_fun_wrap .answer_box .answer_window .answer_message {
  margin-top: 6px;
  font-size: 14px;
  font-family: 'PingFangSC-Regular,PingFang SC';
  font-weight: 400;
  color: #4d4d4d;
  line-height: 22px
}

.mod_fun_wrap .answer_box .answer_window .answer_info {
  margin-top: 20px;
  position: relative
}

.mod_fun_wrap .answer_box .answer_window .answer_info .answer_exit {
  position: absolute;
  left: 117px;
  top: 8px;
  font-size: 14px;
  font-family: 'PingFangSC-Semibold,PingFang SC';
  font-weight: 600;
  color: #4d4d4d;
  line-height: 22px;
  cursor: pointer
}

.mod_fun_wrap .answer_box .answer_window .answer_info .answer_vip {
  display: block;
  width: 145px;
  height: 36px;
  background: #ca0c16;
  border-radius: 2px;
  position: absolute;
  right: 0;
  top: 0
}

.mod_fun_wrap .answer_box .answer_window .answer_info .answer_vip .answer_img {
  display: block;
  width: 19px;
  height: 15px;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute
}

.mod_fun_wrap .answer_box .answer_window .answer_info .answer_vip .answer_text {
  margin: 0;
  position: absolute;
  left: 40px;
  font-size: 16px;
  font-family: 'PingFangSC-Regular,PingFang SC';
  font-weight: 400;
  color: #fff;
  line-height: 36px
}

.mod_fun_wrap .return_answer_btn {
  width: 44px;
  height: 26px;
  font-size: 14px;
  color: #4d4d4d;
  line-height: 24px;
  border-radius: 2px;
  border: 1px solid #ccc;
  float: left;
  text-align: center;
  cursor: pointer
}
</style>

<style scoped>
.page-box .pagination-container {
  padding: 0;
}

/deep/ .ql-editor img {
  width: 50% !important;
}

/deep/ .el-pagination.is-background .btn-next, /deep/ .el-pagination.is-background .btn-prev, /deep/ .el-pagination.is-background .el-pager li {
  margin: 0 5px !important;
}

/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  margin: 0 5px !important;
}

.fullShow_class {
  position: fixed !important;
  top: 0px !important;
  left: 0 !important;
  background: #f7f8f9 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  z-index: 100005 !important;
  padding: 0 !important;
}

.fullShow_class .fullWidth {
  position: relative !important;
  width: 1000px !important;
  margin: 20px auto !important;
}


.qudiaoBorder .ql-container.ql-snow {
  border: none;
}

.qudiaoBorder .ql-editor {
  padding: 0;
}

.pub_list_new {
  background: #f7f7fc;
  border-radius: 2px;
  width: 100%;
  border: none;
  padding: 6px 8px !important;;
  box-sizing: border-box;
  margin: 10px 0 !important;;
}

.pub_list_new li {
  padding: 0;
  font-size: 12px;
  line-height: 17px;
  color: #999aaa;
  position: relative;
}

.tijiao {
  color: #555666;
  font-size: 14px;
  line-height: 28px;
  margin: 10px 0 0 !important;
}

.tijiao .btn_b {
  cursor: pointer;
  color: #fff !important;
  font-size: 14px;
  height: 28px;
  line-height: 28px;
  width: 88px;
  border-radius: 14px;
  background-color: #fc5531;
  padding: 0;
  border: none;
}

.tijiao .btn_b:hover {
  background-color: #fc1944;
}

.replyHeight {
  position: fixed;
  /*left: 221.5px;*/
  bottom: 0px;
  box-shadow: rgb(0 0 0 / 5%) 0px -1px 1px 0px;
}
</style>
